<style lang="scss" scoped>
.search {
    ul {
        width: 554px;
        li {
            color: #ccc;
            font-size: 14px;
            display: inline-block;
            padding:5px 15px;
        }
        li:hover {
            cursor: pointer;
        }
        .isActive {
            background: #4BC7FC;
            color:#fff;
        }
    }
    .search-box{
        height:48px;
        .inline-button {
            width: 48px;
            height: 48px;
            background-color: rgba(75, 199, 252, 1);
            border: none;
            border-radius: 5px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 16px;
            vertical-align:middle;
        }
        .el-forward{
            width: 24px;
            height: 24px;
            margin-top:12px;
            display: inline-block;
            cursor: pointer;
            background:url("/static/image/forward.png") no-repeat center;
            &:hover{
                background:url("/static/image/forward-active.png") no-repeat center;
            }
        }
    }
}
</style>

<template>
    <div class="search">
         <ul>
            <li @click="changeNav(1)" :class="navActiveIndex == 1? 'isActive':''">药物</li>
            <li @click="changeNav(2)" :class="navActiveIndex == 2? 'isActive':''">基因</li>
            <li @click="changeNav(3)" :class="navActiveIndex == 3? 'isActive':''">药物相互作用</li>
        </ul> 
        <div class="search-box" v-if="navActiveIndex == 1">
            <el-autocomplete :autofocus="focus"  v-model="searchStr"  trigger-on-focus="false"  :fetch-suggestions="querySearch" placeholder="请输入药物名称(中文名/英文名/别名/商品名)" @select="handleSelect">
                <i v-if="searchStr"
                    class="el-icon-error el-input__icon"
                    slot="suffix"
                    @click="clearSearchStr">
                </i>
                <i v-if="!searchStr"
                    class="el-forward"
                    slot="suffix"
                    @click="goIndex">
                </i> 
                <template slot-scope="{ item }">
                    <div class="name"><span>{{ item.name }}</span></div>
                </template>
            </el-autocomplete>
            <el-button type="primary" @click="goSearch" class="inline-button"  icon="el-icon-search"></el-button>
        </div>
        <div class="search-box" v-if="navActiveIndex == 2">
            <el-autocomplete :autofocus="focus"  v-model="searchStrGene"  trigger-on-focus="false"  :fetch-suggestions="querySearchGene" placeholder="请输入基因名称" @select="handleSelectGene">
                <i v-if="searchStrGene"
                    class="el-icon-error el-input__icon"
                    slot="suffix"
                    @click="clearSearchGeneStr">
                </i>
                <template slot-scope="{ item }">
                    <div class="name"><span>{{ item.name }}</span></div>
                </template>
            </el-autocomplete>
            <el-button type="primary" @click="goGene" class="inline-button"  icon="el-icon-search"></el-button>
        </div>
        <div class="search-box search-drug-box" v-if="navActiveIndex == 3">
            <el-autocomplete :autofocus="focus"  v-model="searchStrDrugA"  trigger-on-focus="false"  :fetch-suggestions="querySearchDrugA" placeholder="请输入药物A" @select="handleSelectDrugA">
                <i v-if="searchStrDrugA"
                    class="el-icon-error el-input__icon"
                    slot="suffix"
                    @click="clearSearchDrugAStr">
                </i>
                <template slot-scope="{ item }">
                    <div class="name"><span>{{ item.medicine }}</span></div>
                </template>
            </el-autocomplete>
            <el-autocomplete :autofocus="focus"  v-model="searchStrDrugB"  trigger-on-focus="false"  :fetch-suggestions="querySearchDrugB" placeholder="请输入药物B" @select="handleSelectDrugB">
                <i v-if="searchStrDrugB"
                    class="el-icon-error el-input__icon"
                    slot="suffix"
                    @click="clearSearchDrugBStr">
                </i>
                <template slot-scope="{ item }">
                    <div class="name"><span>{{ item.medicine }}</span></div>
                </template>
            </el-autocomplete>
            <el-button type="primary" @click="goInt" class="inline-button"  icon="el-icon-search"></el-button>
        </div>
    </div>
</template>

<script>
import {medicine} from 'api/index.js';
export default {
    name: "search",
    data() {
        return {
            focus:false,
            navActiveIndex: 1,
            searchStr: "",
            searchStrGene:"", //基因名称
            searchStrDrugA:"",  //药物A
            searchStrDrugAId:"",//药物A id
            searchStrDrugB:""  //药物B
      };
  },
    methods: {
        querySearch(queryString,cb) {
            this.doAllSearch(function(data){
                if(data.data){
                    cb(data.data);
                }
            });
        },
        //调用搜索接口
        doAllSearch(cb){
            var obj={
                str:this.searchStr,
            }
            medicine.drugSolrSerachAll(obj).then((data)=>{
                if(data.status == 200){
                    if(cb && typeof(cb) == "function"){
                        cb(data)
                    }
                }
            })
        },
        //基因查询
        querySearchGene(queryString,cb){
            this.doGeneSearch(function(data){
                if(data.data){
                    cb(data.data);
                }
            });
        },
        //调用基因接口
        doGeneSearch(cb){
            var obj={
                str:this.searchStrGene,
            }
            medicine.drugGeneSolrSerachAll(obj).then((data)=>{
                if(data.status == 200){
                    if(cb && typeof(cb) == "function"){
                        cb(data)
                    }
                }
            })
        },
        //调用药物相互作用A
        querySearchDrugA(queryString,cb){
            this.doDrugSearchA(function(data){
                if(data.data){
                    cb(data.data);
                }
            });
        },
        //搜索药物A
        doDrugSearchA(cb){
            var obj={
                drugName:this.searchStrDrugA,
                medicine:""
            }
            medicine.interactionSolrSerachAll(obj).then((data)=>{
                if(data.status == 200){
                    if(cb && typeof(cb) == "function"){
                        cb(data)
                    }
                }
            })
        },
        //调用药物相互作用B
        querySearchDrugB(queryString,cb){
            this.doDrugSearchB(function(data){
                if(data.data){
                    cb(data.data);
                }
            });
        },
        //搜索药物B
        doDrugSearchB(cb){
            var obj={
                drugName:"",
                medicine:this.searchStrDrugB,
            }
            medicine.interactionSolrSerachAll(obj).then((data)=>{
                if(data.status == 200){
                    if(cb && typeof(cb) == "function"){
                        cb(data)
                    }
                }
            })
        },
        clearSearchStr() {
            this.searchStr = "";
        },
        clearSearchGeneStr(){
            this.searchStrGene = "";
        },
        clearSearchDrugAStr(){
            this.searchStrDrugA = "";
        },
        clearSearchDrugBStr(){
            this.searchStrDrugB = "";
        },
        handleSelect(obj) {
            this.$store.state.searchType = 1;
            this.$store.state.searchId = obj.id;
            sessionStorage.setItem("searchId",obj.id);
            this.$router.push("/basic");
        },
        handleSelectGene(obj){
            this.$router.push("/geneIndex?geneId="+obj.id);
        },
        handleSelectDrugA(obj){
            this.searchStrDrugA = obj.medicine;
        },
        handleSelectDrugB(obj){
            this.searchStrDrugB = obj.medicine;
        },
        goSearch() {
            if(!this.searchStr){
                return;
            }
            this.$store.state.searchType = "";
            this.$store.state.searchStr = this.searchStr;
            sessionStorage.setItem("searchStr",this.searchStr);
            this.$router.push("/medicineList");    
        },
        goGene(){
            if(!this.searchStrGene){
                return;
            }
            this.$router.push("/geneIndex/geneList?str="+this.searchStrGene);
        },
        goInt(){
            if(!this.searchStrDrugA && !this.searchStrDrugB){
                return
            }
            this.$router.push("/intIndex?medicine="+this.searchStrDrugB+'&drugName='+this.searchStrDrugA);
        },
        //点击进入主页
        goIndex(){
            this.$router.push("/index");
        },
        changeNav(index) {
            this.navActiveIndex = index;
        }
    }
};
</script>


